<template>
  <div class="container">
  <el-row>
    <el-col :span="18">
      <div>
      <el-tag>初诊内容:</el-tag>
      <el-button plain  :icon="iconTab" style="float: right;margin-right: 20px" @click="modelNameShowAndHide">快捷操作</el-button>
      </div>
      <el-form ref="result" :model="result">
      <div>
        <div>
          <el-form-item label="主诉" class="outpatientCatalogInput" label-width="100px" >
            <el-input type="textarea" :rows="1" resize="none" v-model="param.chiefComplaint" disabled></el-input>
          </el-form-item>
          <el-form-item label="现病史" class="outpatientCatalogInput" label-width="100px">
            <el-input type="textarea" :rows="2" v-model="param.historyOfPresentIllness" disabled></el-input>
          </el-form-item>
          <el-form-item label="现病治疗情况" class="outpatientCatalogInput" label-width="100px">
            <el-input type="textarea" :rows="1" resize="none" v-model="param.historyOfTreatment" disabled></el-input>
          </el-form-item>
          <el-form-item label="既往史" class="outpatientCatalogInput" label-width="100px">
            <el-input type="textarea" :rows="2" v-model="param.pastHistory" disabled></el-input>
          </el-form-item>
          <el-form-item label="过敏史" class="outpatientCatalogInput" label-width="100px">
            <el-input type="textarea" :rows="1" v-model="param.allergies" disabled></el-input>
          </el-form-item>
          <el-form-item label="体格检查" class="outpatientCatalogInput" label-width="100px">
            <el-input type="textarea" :rows="2" v-model="param.healthCheckup" disabled></el-input>
          </el-form-item>
            <el-tag>检查检验结果:</el-tag>
            <el-form-item label="检查结果" class="diagnosisResultCss" prop="checkResult" label-width="100px">
              <el-input type="text" v-model="result.checkResult"></el-input>
            </el-form-item>
            <el-form-item label="检验结果" class="diagnosisResultCss" prop="testResult" label-width="100px">
              <el-input type="text" v-model="result.testResult"></el-input>
            </el-form-item>
        </div>
        <div>
          <el-tag type="primary" round>评估诊断:</el-tag>
          <el-card>
            <el-button type="text" round style="float:right;" @click="drawer = true">添加诊断</el-button>
            <el-dialog title="病症模板" :visible.sync="drawer" :with-header="false">
              <el-form-item label="病症名称:" style="margin-right: 10px" >
                <el-input  v-model="diseQueryParams.name" clearable size="mini" placeholder="输入关键字搜索"/>
                <el-button @click="getDiseList" icon="el-icon-search" size="mini" type="cyan">搜索</el-button>
                <el-button @click="diseRest" icon="el-icon-refresh" size="mini">重置</el-button>
              </el-form-item>
              <el-table :data="diseData" @row-click="diseDataTransfer">
                <el-table-column prop="icd" label="ICD编码"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="code" label="编码"></el-table-column>
              </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="diseQueryParams.pageNum"
                :limit.sync="diseQueryParams.pageSize"
                @pagination="getDiseList"
              />
            </el-dialog>
            <el-table :data="param.assessmentData">
              <el-table-column prop="id" label="ID" v-if="idHid"></el-table-column>
              <el-table-column prop="icd" label="ICD编码"></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="code" label="编码"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-tag
                    type="primary"
                    size="mini"
                    icon="el-icon-delete"
                    @click="outDel(scope.$index,scope.row)">删除
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleUpd"
              v-hasPermi="['dms:case_history:edit']"
              style="float:right;"
            >保存修改</el-button>
          </el-card>
        </div>
      </div>
      </el-form>
      <el-divider direction="vertical" class="el-divider--vertical"></el-divider>
    </el-col>
    <el-col :span="6">
      <div v-show="modelNameShowOrHide">
        <el-row>
          <el-tabs active-name="judge">
            <el-tab-pane label="常用就诊" name="judge">
              <div>
                <el-table :data="getMedicineListData" @row-dblclick="diseFrequentDataTransfer">
                  <el-table-column prop="name" label="名称"></el-table-column>
<!--                  <el-table-column prop="code" label="编码"></el-table-column>-->
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </el-col>
  </el-row>
  </div>
</template>
<script>
  import {getDise, getMedicineList, listDise} from "@/api/dms/outpatient_page";
  import {getNewCase_history, updateCase_history} from "@/api/dms/case_history";

  export default {
    props:['param'],
    data(){
      return{
        /** 右侧表格显示隐藏*/
        modelNameShowOrHide:true,
        /** 图标切换*/
        iconTab:'el-icon-caret-right',
        //需要进行修改的历史病历其他值，检验结果和检查结果
        result:{
          checkResult:'',
          testResult:'',
          registrationId:this.param.registrationId,
          id:'',
          priliminaryDiseIdList:'',
          priliminaryDiseStrList:''
        },
        getMedicineListData:[],
        idHid:false,
        outPatientForm:{
          //主区域表单输入框内容
          chiefComplaint: '',
          historyOfPresentIllness: '',
          historyOfTreatment: '',
          pastHistory: '',
          allergies: '',
          healthCheckup: '',
          startDate: '',
        },
        //药品分页
        diseQueryParams:{
          name:null,
          pageNum: 1,
          pageSize: 7,
        },
        //控制抽屉框的必要操作
        drawer:false,
        //病症列表表格数据
        diseData:{},
        //分页操作
        queryParams: {
          pageNum: 1,
          pageSize: 7,
          status: null,
          name: null,
          aim: null,
          code: null,
          type: null,
        },
        total: 0,
        //病患信息数据
        pmsPatientData:[],
        //对应患者历史病历数据
        historyOutPatient:[],

      }
    },
    created() {
      this.getDiseList();
      this.getMedicineList();
    },
    watch:{
      //"param.priliminaryDiseIdList":function () {
       /* this.param.assessmentData=[];
        if(this.param.priliminaryDiseIdList!=null){
            //整一个病症id的字符串
            let diseListId = this.param.priliminaryDiseIdList;
            //若有多个id，将字符串按照逗号分割
            let diseSplitList = diseListId.split(",");
            for (var i = 0; i < diseSplitList.length; i++) {
              getDise(parseInt(diseSplitList[i])).then(response => {
                this.param.assessmentData.push({
                  id: response.data.id,
                  icd: response.data.icd,
                  code: response.data.code,
                  name: response.data.name
                });
              });
          }
        }*/
      //}
    },
    methods:{
      /** modelNameShowAndHide数据表格显隐*/
      modelNameShowAndHide(){
        this.modelNameShowOrHide = !this.modelNameShowOrHide;
        this.iconTab = this.modelNameShowOrHide==true?'el-icon-caret-right':'el-icon-caret-left';
      },
      //重置药品页面数据
      diseRest(){
        this.diseQueryParams= {
          name:null,
          code:null,
          pageNum: 1,
          pageSize: 7,
        };
        this.getDiseList();
      },
  //常用项表格点击新增
      getMedicineList(){
        this.loading = true;
        getMedicineList().then(response => {
          this.total = response.total;
          this.getMedicineListData = response.rows;
          this.loading = false;
        })
      },
      //获取病症集合并渲染到表格中
      getDiseList() {
        this.loading = true;
        listDise(this.diseQueryParams).then(response => {
          this.total = response.total;
          this.diseData = response.rows;
          this.loading = false;
        })
      },
      //诊断列表点击新增
      diseDataTransfer(row,event,column) {
        this.$confirm('添加一条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.checkDiseData(row.icd)){
            getDise(row.id).then(response => {
              this.param.assessmentData.push({
                id: response.data.id,
                icd: response.data.icd,
                code: response.data.code,
                name: response.data.name
              });
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
            })
          }else{
            this.$message({
              type:'warning',
              message:'已有此数据，不能重复添加！'
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          });
        });

      },
      //查重
      checkDiseData(icd){
        let list = this.param.assessmentData;
        for(var i=0;i < list.length;i++){
          if(icd==list[i].icd){
            return false;
          }
        }
        return true;
      },
      //删除临时数据框中数据
      outDel(index,row){
        this.$confirm('是否确认删除'+"'"+row.name+"'"+'此条数据?',"警告",{
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"warning"
        }).then(() =>{
          this.param.assessmentData.splice(index,1);
          this.msgSuccess("删除成功") ;
        })
      },
      //修改初诊信息
      handleUpd(){
        var resultAssessment = this.param.assessmentData;
        var strList = '';
        var idList = '';
        for(var i = 0;i < resultAssessment.length;i++){
            strList += resultAssessment[i].name+",";
            idList += resultAssessment[i].id+",";
        }
        //id和name字符串的最后一位逗号的下标
        let idListIndex = idList.lastIndexOf(",");
        let strListIndex = strList.lastIndexOf(",");
        //id和name字符串去除最后一位的逗号
        idList = idList.substring(0,idListIndex);
        strList = strList.substring(0,strListIndex);
        this.result.priliminaryDiseIdList = idList;
        this.result.priliminaryDiseStrList = strList;
        getNewCase_history(this.param.patientId).then(response =>{
          this.result.id = response.data.id;
          updateCase_history(this.result).then(response =>{
            if(response.code===200){
              this.msgSuccess("修改信息成功，已确诊");
              this.$emit("diagDis",true);
            }
          })
        });
      },
      //常用诊断模板点击传值
      diseFrequentDataTransfer(row){
        if(this.checkDiseData(row.icd)){
          getDise(row.id).then(response => {
            this.param.assessmentData.push({
              id: response.data.id,
              icd: response.data.icd,
              code: response.data.code,
              name: response.data.name
            });
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
          })
        }else{
          this.$message({
            type:'warning',
            message:'已有此数据，不能重复添加！'
          })
        }
      }
    }
  }
</script>

<style scoped>
  .outpatientCatalogInput{
    margin-top: 10px;
    margin-bottom: 18px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
  .diagnosisResultCss{
    margin-bottom: 10px;
    width: 30%;
  }
  .container{
    padding:5px;
  }
</style>
